<template>
  <CommonTable
    ref="commonTable"
    :is-select="true"
    :columns="columns"
    :dataSource="dataSource"
    :total="dataSource.length"
    :isLoading="isLoading"
    @getPageParams="getPageParams"
    @get-table-sort="getTableSort"
    @getSelectColumn="getSelectColumn"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'operation'">
        <span>
          <i
            class="details"
            type="primary"
            @click="onView(column, text, record)"
            >查看详情</i
          >
        </span>
      </template>
      <template v-else-if="column.dataIndex === 'image'">
        <a-image
          :width="30"
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
        {{ record.address }}
      </template>
    </template>
  </CommonTable>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import CommonTable from '../../components/myTable/indexView.vue'
import { cloneDeep } from 'lodash'
import { MailOutlined } from '@ant-design/icons-vue'

const columns = [
  {
    title: '用户ID',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    resizable: true,
    // maxWidth: 200,
    // minWidth: 75,
    width: 100,
    sorter: false,
  },
  {
    title: '游戏名称',
    width: 100,
    dataIndex: 'age',
    align: 'center',
    key: 'age',
  },
  {
    title: '反馈时间',
    dataIndex: 'address',
    align: 'center',
    key: 'tags',
    width: 100,
  },
  {
    title: '反馈类型',
    align: 'center',
    dataIndex: 'address',
    key: '2',
    width: 100,
  },
  {
    title: '问题描述',
    dataIndex: 'image',
    align: 'center',
    key: '3',
    width: 140,
  },
  {
    title: '反馈信息',
    align: 'center',
    dataIndex: 'address',
    key: '4',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'action',
    align: 'center',
    // maxWidth: 200,
    minWidth: 75,
    width: 100,
    sorter: false,
  },
]

const dataSource = ref(
  Array.from({ length: 100 }, (_, i) => ({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ['cool', 'teacher'],
  })),
)

const isLoading = ref(false)
const commonTable = ref(null)

const getPageParams = (start, length) => {
  console.log('分页数据：', start, length)
}

const getSelectColumn = rows => {
  console.log('选择的数据：', rows)
}

const getTableSort = sorter => {
  if (sorter.order) {
    console.log(
      sorter.order === 'ascend' ? '升序' : '降序',
      '排序表头字段：',
      sorter.field,
    )
  } else {
    console.log('默认顺序----')
  }
  console.log('排序数据：', sorter)
}

const onView = item => {
  console.log('View item:', item)
}

const onDelete = key => {
  dataSource.value = dataSource.value.filter(item => item.key !== key)
}

const handleAdd = () => {
  const newData = {
    key: `${dataSource.value.length}`,
    name: `Edward King ${dataSource.value.length}`,
    age: 32,
    address: `London, Park Lane no. ${dataSource.value.length}`,
  }
  dataSource.value.push(newData)
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
